

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>预约参观</title>
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="/assets/module/admin.css?v=315"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-form-item {
            margin-bottom: 25px;
        }

        label .layui-icon {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>

<!-- 加载动画 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">

            <form class="layui-form" id="form" style="max-width: 700px;margin: 40px auto;">
                <div class="layui-form-item">
                    <label class="layui-form-label">您的名字:<i lay-tips="如果替别人报名，填对方的名字" lay-direction="1" class="layui-icon layui-icon-tips"></i></label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="请输入您的姓名" class="layui-input"
                               lay-verType="tips" lay-tips="请输入您的姓名" lay-verify="required" maxlength="10"   required/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">参观日期:<i lay-tips="只能预约15天内的参观" lay-direction="1" class="layui-icon layui-icon-tips"></i></label>
                    <div class="layui-input-block">
                        <input id="edtDateFormBas" type="text" name="visitdate" placeholder="请选择参观日期"
                               class="layui-input date-icon" autocomplete="off" value="{$visitor|default=$today}" 
                               lay-verType="tips" lay-verify="required"
                               required/>

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">时间段:<i lay-tips="上午可预约数400，下午可预约数600" lay-direction="1" class="layui-icon layui-icon-tips"></i></label>
                    <div class="layui-input-block">
                            <select name="datez" id="datez" lay-filter="datez" lay-tips="上午可预约数400，下午可预约数600" lay-verType="tips " lay-verify="required" required>
                                <option value="">请选择</option>
                                <option value="上午">上午</option>
                                <option value="下午">下午</option>
                            </select>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">手机号码:<i lay-tips="请输入正确的手机号码" lay-direction="1" class="layui-icon layui-icon-tips"></i></label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" id="phone" placeholder="请输入您的手机号码" class="layui-input" lay-verType="tips" lay-verify="phone" required />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">身份证号码:<i lay-tips="请输入身份证号码" lay-direction="1" class="layui-icon layui-icon-tips"></i></label>
                    <div class="layui-input-block">
                        <input type="text" name="idcard" placeholder="请输入身份证号码" class="layui-input" lay-verType="tips" lay-verify="identity" required   />
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">其他备注:<i lay-tips="其他备注（可选）" lay-direction="1" class="layui-icon layui-icon-tips"></i></label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入备注信息(100个字符）" class="layui-textarea"
                                  lay-verType="tips" lay-verify="h5" maxlength="100"  ></textarea>

                    </div>
                </div>
				<!--
                <div class="layui-form-item">
                    
                    <div class="layui-input-block">
                    <input type="checkbox" name="close"  lay-filter="switch" lay-skin="switch" lay-text="已阅读|确认">点击阅读《入园须知》
                    <input type="hidden" name="comfirm" id="comfirm" class="layui-input" value="0"   />
                    </div>
                </div>
				-->


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-filter="formSubmitBas" lay-submit>提交预约</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<!-- 固定底部按钮 -->
<script type="text/html" id="modelPtInfo">
    <form id="modelFormPtInfo" lay-filter="modelFormPtInfo" class="layui-form model-form no-padding">
        <input type="hidden" value="1" name="pid" id="pid">
        <div class="model-form-body" style="max-height: 550px;">

        <div class="layui-form-item text-center model-form-header">
            入园须知
        </div>
            <div style="margin-left: 30px;">
                请游客及随行人员携带个人身份证并承诺：<br />

                (1) 两周内，没有到过湖北省；<br />
                (2) 两周内，家人及周围朋友没有到过湖北省;<br />
                (4) 两周内，没有与新型冠状病毒感染的肺炎患者接触史;<br />
                (4) 两周内，没有与发热、呼吸道症状患者接触史;<br />
                (5) 没有发热，咳嗽，胸闷与其他身体不适等情况<br />
				
			</div>

        </div>



        <div class="layui-form-item text-right model-form-footer">
            
        </div>
    </form>
</script>


<!-- js部分 -->
<script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="/assets/js/common.js?v=315"></script>
<script>






    layui.use(['layer', 'form', 'laydate','formX','notice','admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var formX = layui.formX;
        var notice = layui.notice;
        var admin = layui.admin;



		//询问框

        admin.open({
          type: 1,
          title: '入园须知',
          shade: 0.6,
          content: $('#modelPtInfo').html(),
		  btn: ['我已知悉，并确定'] //按钮
		  ,area: ['450px', '400px'] //宽高

		  ,cancel: function(index, layero){ 
			  if(confirm('是否已经阅读')){ //只有当点击confirm框的确定时，该层才会关闭
			    layer.alert("请确认阅读《入园须知》")
			  }
			  return false; 
		  } ,function(){
			  layer.msg('我已知悉，并确定', {icon: 1});
			}, function(){

			}

		});






        $(function(){
            var value =$("#edtDateFormBas").val();
            $.ajax({
                type:'POST',
                url:'{:url('index/getcount')}?',
                data:'visitdate='+value,
                dataType:"json",
                success:function(data){
                    /*
                    layer.open({
                      type: 0, 
                      time: 3000,
                      content: data.msg //这里content是一个普通的String
                    });
                    */
                    if (data.code ==400) {
                        alert(data.msg);
                        admin.closeAllTabs();
                    }
                }
            })
            return false;
        });


        //select 上午、下午事件监听
        form.on('select(datez)', function(data){
            var visitdate =$("#edtDateFormBas").val();
            var datez =data.value;

            $.ajax({
                type:'POST',
                url:'{:url('index/getdatez')}?',
                data:'visitdate='+visitdate+"&datez="+datez,
                dataType:"json",
                success:function(data){
                    //console.log(data);
                    if (data.code ==400) {
                        alert(data.msg);
                        admin.refresh();
                    }
                }
            })
            return false;

        });



        // 渲染laydate,事件监听
        laydate.render({
            elem: '#edtDateFormBas'
            //,type: 'datetime'
            ,range: false
            ,min: 0
            ,max: 14
            ,format: 'yyyy-MM-dd' //可任意组合

            ,done: function(value, date, endDate){
                $.ajax({
                    type:'POST',
                    url:'{:url('index/getcount')}?',
                    data:'visitdate='+value,
                    dataType:"json",
                    success:function(data){
                        if (data.code ==400) {
                            alert(data.msg);
                            admin.refresh();
                            //admin.closeAllTabs();
                            //window.history.back();
                        }
                        
                    }
                })
            }
        });



        //监听提交
        form.on('switch(switch)', function (data) {
            //console.log(data.elem); //得到checkbox原始DOM对象
            //console.log(data.elem.checked); //开关是否开启，true或者false
            //console.log(data.value); //开关value值，也可以通过data.elem.value得到
            //console.log(data.othis); //得到美化后的DOM对象
            var x=data.elem.checked;


            $("#comfirm").attr("value" , "1"); 

            layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
                type: 0,
                content: '温馨提示：请携带身份证，佩戴口罩，发热者不接待；文明出行，你我参与。'
                //,area: ['800px', '300px']
                ,btn: ['已经阅读', '    取消']
                ,yes: function(index, layero){
                    $("#comfirm").attr("value" , "1"); 
                    data.elem.checked=x;
                    form.render();
                    layer.close(index);
                    //按钮【按钮一】的回调
                }
                ,btn2: function(index, layero){
                    $("#comfirm").attr("value" , "0"); 
                    //按钮【按钮二】的回调
                    data.elem.checked=!x;
                    form.render();
                    layer.close(index);
                    //return false 开启该代码可禁止点击该按钮关闭
                }
                ,cancel: function(){
                    $("#comfirm").attr("value" , "0"); 
                    //右上角关闭回调
                    data.elem.checked=!x;
                    form.render();
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
            form.render();
        });


        // 监听表单提交
        form.on('submit(formSubmitBas)', function (data) {
        	/*
            var comfirm=$("#comfirm").val();
            if (comfirm ==0) {
                    
                layer.open({
                  type: 0, 
                  time: 3000,
                  content: '请确认阅读《入园须知》' //这里content是一个普通的String
                });
                return false;
            }
            */


            //console.log(comfirm);
            //layer.msg(JSON.stringify(data.field));
            //return false;


            //layer.msg(JSON.stringify(data.field));
            
            var formData=$('#form').serialize();
            var title =$('#phone').val();
            var edtDateFormBas =$('#edtDateFormBas').val();
            $.ajax({
                type:'POST',
                url:'{:url('index/save')}',
                data:formData,
                dataType:"json",
                success:function(data){
                    //console.log(data);
                    //var err_code=data.err_code;
                    if(data.code ==200){
                        admin.refresh('/index/index/console.html');
                        alert('预约成功！');
                        notice.msg(data.msg, {icon: 1});
                        window.location.href="{:url('index/query')}?title="+title+"&visitdate="+edtDateFormBas;
                    }else{
                        layer.msg(data.msg ,{icon: 5} , function(){
                            admin.refresh();
                        });
                        return;
                    }
                },
                error:function(){
                    layer.msg("网络错误");
                }


            })

            return false;
        });
    });
</script>
</body>
</html>